<template>
  <div>
    <div id="app">
      <div class="content">
        <div class="content_input">
          <div class="title">
            <p>用户登录</p>
          </div>
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
            <el-form-item prop="name">
              <el-input
                v-model="ruleForm.name"
                clearable
                placeholder="用户名"
                @keydown.enter.native="nextFocus(0)"
              ></el-input>
            </el-form-item>
            <el-form-item prop="poss">
              <el-input
                v-model="ruleForm.poss"
                clearable
                show-password
                placeholder="密码"
                @keydown.enter.native="nextFocus(1)"
              ></el-input>
            </el-form-item>
            <div class="content_button">
              <el-button type="primary" @click="submitForm('ruleForm')"
                >一键登录</el-button
              >
            </div>
            <div class="zhanghao" @click="zhuc()">
              <a
                href="javascript:void(0)"
                style="color: red; text-decoration: none"
                >还没有账号？立即注册！</a
              >
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<!-- 引入组件库 -->
<script type="text/javascript" src="../js/ribbon.js"></script>
<script type="text/javascript" src="../js/index.js"></script>
<script>
import ribbon from "../js/ribbon";
import index from "../js/index";
export default {
  data() {
    var validatephone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机号"));
      } else {
        if (/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.ruleForm.name)) {
          callback();
        } else {
          callback(new Error("请输入合法的手机号"));
        }
      }
    };
    return {
      ruleForm: {
        name: "",
        poss: "",
      },
      rules: {
        name: [
          { pattern: /^1(3|4|5|6|7|8|9)\d{9}$/, message: "请输入合法的手机号" },
          { validator: validatephone, trigger: "blur" },
        ],
        poss: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "长度在 6 到 15 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    var a = document.getElementById("bgCanvas");
    a.style.display = "block";
  },
  methods: {
    nextFocus(index){//按回车键，聚焦下一个input。
      if(index<1){
          this.$refs["ruleForm"].$el[index+1].focus();
      }else{
          this.submitForm("ruleForm");
      }             
    },
    zhuc: function () {
      var a = document.getElementById("bgCanvas");
      a.style.display = "none";
      this.$router.push("/logo/regist");
    },
    submitForm: function (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.http
            .type('/logins',{sub: "sign",phone:this.ruleForm.name,poss:this.ruleForm.poss })
            .then((response) => {
              var code = response.data.code;
              var msg = response.data.msg;
              if (code == 0) {
                var a = document.getElementById("bgCanvas");
                a.style.display = "none";
                this.$message({
                  message: msg,
                  type: "success",
                });
                localStorage.setItem(
                  "logo",
                  JSON.stringify(this.ruleForm.name)
                );
                this.$router.push("/");
              } else {
                this.$message({
                  message: msg,
                  type: "warning",
                });
              }
            });
        } else {
          this.$message({
            message: "请填写正确后再登录",
            type: "warning",
          });
          return false;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.zhanghao {
  text-align: center;
  color: red;
  margin-top: 15px;
  font-size: 14px;
}
.content {
  width: 500px;
  height: 300px;
  box-sizing: border-box;
  padding: 0 50px;
  border-radius: 5px;
  box-shadow: 0px 2px 12px 0px rgba(105, 105, 105, 0.07);
  background: rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: mymove 1s ease-in-out alternate;
  overflow: hidden;
  transition: 1.5s;
}
.content_input {
  width: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.content_button {
  margin-top: 10px;
}

.title {
  text-align: center;
  font-size: 24px;
  margin-bottom: 30px;
  font-weight: bold;
  color: #606266;
}

.el-button--primary {
  width: 100%;
  padding: 12px 20px;
  font-size: 14px;
}
.el-form-item {
  margin-bottom: 22px;
}
* {
  padding: 0;
  margin: 0;
}
@keyframes mymove {
  0% {
    width: 0px;
    height: 5px;
  }

  10% {
    width: 50px;
    height: 5px;
  }

  15% {
    width: 100px;
    height: 5px;
  }

  20% {
    width: 150px;
    height: 5px;
  }

  25% {
    width: 200px;
    height: 5px;
  }

  30% {
    width: 250px;
    height: 5px;
  }

  35% {
    width: 300px;
    height: 5px;
  }

  40% {
    width: 350px;
    height: 5px;
  }

  45% {
    width: 450px;
    height: 5px;
  }

  50% {
    width: 500px;
    height: 5px;
  }

  55% {
    height: 30px;
  }

  60% {
    height: 60px;
  }

  65% {
    height: 90px;
  }

  70% {
    height: 120px;
  }

  75% {
    height: 150px;
  }

  80% {
    height: 180px;
  }

  85% {
    height: 210px;
  }

  90% {
    height: 240px;
  }

  95% {
    height: 240px;
  }

  100% {
    height: 300px;
  }
}
</style>